<template>
    <div id="BackClassManager">
        <div id="headTitle">班级管理</div>
        <div id="searchClass">
            <el-input id="searchTextInput" v-model="searchClass" placeholder="请输入搜索的班级"/>
            <el-button type="primary" @click="loadData">搜索</el-button>
        </div>
        <div id="table">
            <el-table max-height="700" :data="classInfo" border>
                <el-table-column prop="classID" label="班级ID" show-overflow-tooltip align="center"/>
                <el-table-column prop="className" label="班级" show-overflow-tooltip align="center"/>
                <el-table-column prop="userName" label="班级管理员" show-overflow-tooltip align="center"/>
                <el-table-column prop="isBan" label="是否禁封" show-overflow-tooltip align="center">
                    <template #default="scope">
                        <span v-if="scope.row.isBan === '否'" style="color: #4bbe92">{{scope.row.isBan}}</span>
                        <span v-if="scope.row.isBan === '是'" style="color: #f56c6c">{{scope.row.isBan}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button type="primary" v-if="scope.row.isBan === '否'" plain @click="banClass(scope.row)">禁封</el-button>
                        <el-button type="danger" v-if="scope.row.isBan === '是'" plain @click="unBanClass(scope.row)">解封</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="pagination">
            <el-pagination
                    v-model:current-page="pageNumber"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 50]"
                    :small=false
                    :disabled=false
                    :background=false
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="classTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
//请求
import request from '@/utils/requset.js';
//顶部提示信息
import prompt from '@/utils/prompt.js'
//路由跳转
import router from "@/router";

export default {
    name: 'allClassNotice',
    data() {
        return {
            pageNumber: 1,
            pageSize: 5,
            searchClass: "",
            classInfo: [],
            classTotal: 0,
        }
    },
    created() {
        this.loadData();
    },
    methods: {
        //加载班级信息
        loadData() {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                prompt("还未登录！", "error");
                router.push({path: "/backLogin"});
                return;
            }
            request.get("/class/infoForBack", {
                params: {
                    token: token,
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    searchClass: this.searchClass,
                }
            }).then(result => {
                //请求失败
                if (result.code !== "200") {
                    prompt(result.message, result.type);
                }
                //请求成功
                this.classInfo = result.data.classInfo;
                this.classTotal = result.data.classTotal;
            })
        },
        //禁封班级
        banClass(classInfo) {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            request.post(
                "/class/ban",
                classInfo
            ).then(result => {
                prompt(result.message, result.type);
                //加载新数据
                this.loadData();
            });
        },
        //解封班级
        unBanClass(classInfo) {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            request.post(
                "/class/unBan",
                classInfo
            ).then(result => {
                prompt(result.message, result.type);
                //加载新数据
                this.loadData();
            });
        },
        //分页-单页数量
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.loadData();
        },
        //分页-页码
        handleCurrentChange(pageNumber) {
            this.pageNumber = pageNumber;
            this.loadData();
        },
    }
}
</script>
<style>
#BackClassManager #headTitle {
    text-align: center;
    font-size: 45px;
    color: #63a1b2;
    margin: 25px auto;
}

#BackClassManager #searchClass {
    margin: 15px 0;
}

#BackClassManager #searchClass .el-input {
    width: 400px;
    margin-right: 10px;
}

#BackClassManager #table {
    border-radius: 5px;
    overflow: hidden;
    margin-top: 25px;
}

#BackClassManager .tableRowContainer {
    margin: 0 500px;
}

#BackClassManager .tableRow {
    font-size: 15px;
    padding: 20px;
    margin: 5px 0;
    border: 1px solid #63a1b2;
    border-radius: 10px;
}

#BackClassManager #pagination {
    position: absolute;
    bottom: 1vh;
}
</style>